import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({
    data() {
        return {
            mobile: {
                city : '',
                province: '',
                sp: ''
            },
            searchConditions: {
                phone: ''
            },
            error: ''
        }
    },
    methods: {
        handleInput() {
            if (this.searchConditions.phone.length >= 3) {
                const phonePrefix = this.searchConditions.phone.substring(0, 3);
                // 根据前三位数字判断运营商
                if (phonePrefix === '130' || phonePrefix === '131' || phonePrefix === '132') {
                    this.mobile.sp = '中国联通';
                } else if (phonePrefix === '133' || phonePrefix === '153' || phonePrefix === '173' || phonePrefix === '177' || phonePrefix === '180' || phonePrefix === '181' || phonePrefix === '189') {
                    this.mobile.sp = '中国电信';
                } else if (phonePrefix === '134' || phonePrefix === '135' || phonePrefix === '136' || phonePrefix === '137' || phonePrefix === '138' || phonePrefix === '139' || phonePrefix === '147' || phonePrefix === '150' || phonePrefix === '151' || phonePrefix === '152' || phonePrefix === '157' || phonePrefix === '158' || phonePrefix === '159' || phonePrefix === '172' || phonePrefix === '178' || phonePrefix === '182' || phonePrefix === '183' || phonePrefix === '184' || phonePrefix === '187' || phonePrefix === '188') {
                    this.mobile.sp = '中国移动';
                } else {
                    this.mobile.sp = '';
                    this.error = '未知运营商';
                    return;
                }
                // 清空错误信息
                this.error = '';

            }
        },
        search() {
            // 前端数据校验
            if (!/^\d{11}$/.test(this.searchConditions.phone)) {
                this.error = "请输入有效的11位手机号码";
                return;
            }

            axios.get('/mobile?phone=' + this.searchConditions.phone)
                .then(response => {
                    this.error = '';
                    //code为200说明成功
                    if(response.data.code === 200) {
                        this.mobile.province = response.data.data.province;
                        this.mobile.city = response.data.data.city;
                    } else if (response.data.code === -1) {
                        this.mobile.province = '';
                        this.mobile.city = '';
                        this.error = "后端程序出现异常：" + response.data.msg + "，请稍后再试！";
                    } else if (response.data.code === -2) {
                        this.mobile.province = '';
                        this.mobile.city = '';
                        this.error = "您输入的手机号为空，请重试！";
                    } else if (response.data.code === -3) {
                        this.mobile.province = '';
                        this.mobile.city = '';
                        this.error = "未查询到您输入的手机号的归属地，请确认输入手机号是否正确！"
                    }
                })
                .catch(error => {
                    this.error = '查询失败，请稍后重试';
                    console.error('API Error:', error);
                });
        }
    }
}).mount('#app');